<template>
  <div>
    {{ form.name }}
    {{ form.age }}
    <button @click="changeName">修改name</button>
    <button @click="addAge">动态添加age</button>
    <!-- v-model -->
    <input v-model="form.age" type="text">
    <!-- 渲染组件 -->
    <sf-button size="mini" @click="clickHandler">click me</sf-button>
    <sf-button size="large">click me</sf-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: 'hjg'
      }
    }
  },
  methods: {
    clickHandler() {
      console.log('click触发了')
    },
    changeName() {
      this.form.name = 'this is a new name'
    },
    addAge() {
      this.form.age = 20
    }
  }
}
</script>

<style lang="less">

</style>
